<template>
  <view class="scenic-list-page">

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <uni-icons type="search" size="14" color="#999"></uni-icons>
        <input 
          type="text" 
          placeholder="搜索" 
          v-model="searchKeyword"
          class="search-input"
          @input="onSearchInput"
        />
      </view>
          <view class="map-btn" @click="showMap">
            <image src="/static/images/tourism/map-icon.svg" style="width: 20px; height: 20px;" mode="aspectFit"></image>
          </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-section">
      <view class="filter-left">
        <view class="filter-item" @click="showSortMenu">
          <text class="filter-text">首选排序</text>
          <uni-icons type="arrowdown" size="10" color="#4A90E2"></uni-icons>
        </view>
      </view>
      <view class="filter-right">
        <view class="filter-item" @click="showFilterMenu">
          <text class="filter-text">筛选</text>
          <uni-icons type="arrowdown" size="10" color="#4A90E2"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 景区列表 -->
    <scroll-view 
      class="scenic-list" 
      scroll-y="true"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="scenic-item" v-for="(item, index) in scenicList" :key="index" @click="goToDetail(item)">
        <view class="scenic-image">
          <image :src="item.image" mode="aspectFill" class="image"></image>
          <view class="image-tags" v-if="item.tags && item.tags.length">
            <text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
          </view>
        </view>
        <view class="scenic-info">
          <view class="scenic-content">
            <text class="scenic-name">{{ item.name }}</text>
            <text class="scenic-desc">{{ item.description }}</text>
            <view class="scenic-rating">
              <view class="stars">
                <uni-icons 
                  v-for="star in 5" 
                  :key="star"
                  type="star-filled" 
                  size="10" 
                  :color="star <= item.rating ? '#FFB800' : '#E5E5E5'"
                ></uni-icons>
              </view>
            </view>
          </view>
          <view class="scenic-bottom">
            <view class="scenic-left-bottom">
              <view class="scenic-price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{ item.price }}</text>
                <text class="price-unit">起</text>
              </view>
              <text class="scenic-distance">{{ item.distance }}km</text>
            </view>
            <view class="scenic-right-bottom">
              <view class="booking-btn" @click.stop="bookNow(item)">
                <text class="booking-text">立即预订</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text class="load-text">加载更多...</text>
      </view>
      <view class="no-more" v-else-if="scenicList.length > 0">
        <text class="no-more-text">没有更多了</text>
      </view>
    </scroll-view>

    <!-- 排序菜单 -->
    <uni-popup ref="sortPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">排序方式</text>
          <view class="popup-close" @click="closeSortMenu">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="sort-options">
          <view 
            class="sort-option" 
            v-for="option in sortOptions" 
            :key="option.value"
            :class="{ active: currentSort === option.value }"
            @click="selectSort(option.value)"
          >
            <text class="option-text">{{ option.label }}</text>
            <uni-icons v-if="currentSort === option.value" type="checkmarkempty" size="16" color="#4A90E2"></uni-icons>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 筛选菜单 -->
    <uni-popup ref="filterPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">筛选条件</text>
          <view class="popup-close" @click="closeFilterMenu">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="filter-options">
          <view class="filter-group">
            <text class="group-title">价格区间</text>
            <view class="price-range">
              <view 
                class="price-item" 
                v-for="price in priceRanges" 
                :key="price.value"
                :class="{ active: selectedPriceRange === price.value }"
                @click="selectPriceRange(price.value)"
              >
                <text class="price-text">{{ price.label }}</text>
              </view>
            </view>
          </view>
          <view class="filter-group">
            <text class="group-title">景区类型</text>
            <view class="type-tags">
              <view 
                class="type-tag" 
                v-for="type in scenicTypes" 
                :key="type.value"
                :class="{ active: selectedTypes.includes(type.value) }"
                @click="toggleType(type.value)"
              >
                <text class="type-text">{{ type.label }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="filter-actions">
          <view class="reset-btn" @click="resetFilter">
            <text class="reset-text">重置</text>
          </view>
          <view class="confirm-btn" @click="applyFilter">
            <text class="confirm-text">确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      refreshing: false,
      hasMore: true,
      currentPage: 1,
      currentSort: 'default',
      selectedPriceRange: '',
      selectedTypes: [],
      scenicList: [
        {
          id: 1,
          name: '加榜梯田',
          description: '贵州省黔东南苗族侗族自治州从江县加榜乡',
          image: 'https://cdn.xryai.cn/picGo/20250906183040527.jpg',
          rating: 5,
          price: 60,
          distance: 120,
          tags: ['国家4A级景区', '自然风光']
        },
        {
          id: 2,
          name: '肇兴侗寨',
          description: '贵州省黔东南苗族侗族自治州黎平县肇兴镇',
          image: 'https://cdn.xryai.cn/picGo/20250906183344240.jpg',
          rating: 5,
          price: 80,
          distance: 135,
          tags: ['国家5A级景区', '历史文化']
        },
        {
          id: 3,
          name: '高过河漂流',
          description: '贵州省黔东南苗族侗族自治州从江县高增乡',
          image: 'https://cdn.xryai.cn/picGo/20250906183525831.png',
          rating: 4,
          price: 120,
          distance: 110,
          tags: ['户外探险', '自然风光']
        },
        {
          id: 4,
          name: '西江千户苗寨',
          description: '贵州省黔东南苗族侗族自治州雷山县西江镇',
          image: 'https://cdn.xryai.cn/picGo/20250906183711873.png',
          rating: 5,
          price: 100,
          distance: 78,
          tags: ['国家4A级景区', '民族文化']
        },
        {
          id: 5,
          name: '镇远古镇',
          description: '贵州省黔东南苗族侗族自治州镇远县',
          image: 'https://cdn.xryai.cn/picGo/20250906185547347.png',
          rating: 5,
          price: 80,
          distance: 150,
          tags: ['国家5A级景区', '历史古镇']
        }
      ],
      sortOptions: [
        { label: '默认排序', value: 'default' },
        { label: '价格从低到高', value: 'price_asc' },
        { label: '价格从高到低', value: 'price_desc' },
        { label: '评分从高到低', value: 'rating_desc' },
        { label: '距离最近', value: 'distance' }
      ],
      priceRanges: [
        { label: '全部价格', value: '' },
        { label: '免费', value: 'free' },
        { label: '0-50元', value: '0-50' },
        { label: '50-100元', value: '50-100' },
        { label: '100元以上', value: '100+' }
      ],
      scenicTypes: [
        { label: '自然风光', value: 'nature' },
        { label: '历史文化', value: 'culture' },
        { label: '主题乐园', value: 'theme' },
        { label: '温泉度假', value: 'spa' },
        { label: '古镇村落', value: 'ancient' }
      ]
    }
  },
  onLoad(options) {
    // 设置系统导航栏标题
    uni.setNavigationBarTitle({
      title: '景区列表'
    });
    this.loadScenicList()
  },
  onShow() {
    // 页面显示时刷新数据
  },
  methods: {
    
    onSearchInput() {
      // 搜索防抖
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        this.searchScenic()
      }, 500)
    },
    
    searchScenic() {
      console.log('搜索景区:', this.searchKeyword)
      // 实现搜索逻辑
    },
    
    showSortMenu() {
      this.$refs.sortPopup.open()
    },
    
    closeSortMenu() {
      this.$refs.sortPopup.close()
    },
    
    selectSort(value) {
      this.currentSort = value
      this.closeSortMenu()
      this.applySortAndFilter()
    },
    
    showFilterMenu() {
      this.$refs.filterPopup.open()
    },
    
    closeFilterMenu() {
      this.$refs.filterPopup.close()
    },
    
    selectPriceRange(value) {
      this.selectedPriceRange = value
    },
    
    toggleType(value) {
      const index = this.selectedTypes.indexOf(value)
      if (index > -1) {
        this.selectedTypes.splice(index, 1)
      } else {
        this.selectedTypes.push(value)
      }
    },
    
    resetFilter() {
      this.selectedPriceRange = ''
      this.selectedTypes = []
    },
    
    applyFilter() {
      this.closeFilterMenu()
      this.applySortAndFilter()
    },
    
    applySortAndFilter() {
      // 应用排序和筛选
      console.log('应用筛选:', {
        sort: this.currentSort,
        priceRange: this.selectedPriceRange,
        types: this.selectedTypes
      })
    },
    
    loadScenicList() {
      // 加载景区列表数据
      console.log('加载景区列表')
    },
    
    onRefresh() {
      this.refreshing = true
      setTimeout(() => {
        this.refreshing = false
        this.currentPage = 1
        this.loadScenicList()
      }, 1000)
    },
    
    loadMore() {
      if (!this.hasMore) return
      this.currentPage++
      this.loadScenicList()
    },
    
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/tourism/detail/index?id=${item.id}`
      })
    },
    
    bookNow(item) {
      uni.navigateTo({
        url: `/pages/tourism/booking/index?id=${item.id}`
      })
    },
    
    showMap() {
      console.log('显示地图')
      uni.showToast({
        title: '打开地图功能',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scenic-list-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}


/* 搜索栏 */
.search-section {
  background-color: #fff;
  padding: 8px 16px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  
  .search-bar {
    flex: 1;
    background-color: #f8f8f8;
    border-radius: 16px;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    
    .search-input {
      flex: 1;
      margin-left: 6px;
      font-size: 13px;
      color: #333;
      
      &::placeholder {
        color: #999;
      }
    }
  }
  
  .map-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    border-radius: 16px;
  }
}

/* 筛选栏 */
.filter-section {
  background-color: #fff;
  padding: 8px 16px 16px;
  display: flex;
  justify-content: center;
  gap: 60px;
  border-bottom: 1px solid #f0f0f0;
  
  .filter-left, .filter-right {
    display: flex;
  }
  
  .filter-item {
    display: flex;
    align-items: center;
    
    .filter-text {
      font-size: 13px;
      color: #4A90E2;
      margin-right: 3px;
    }
  }
}

/* 景区列表 */
.scenic-list {
  flex: 1;
  padding: 16px 20px;
  background-color: #f8f9fa;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.scenic-item {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  
  .scenic-image {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin: 10px;
    border-radius: 8px;
    overflow: hidden;
    
    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-tags {
      position: absolute;
      bottom: 6px;
      left: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      
      .tag {
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 10px;
        font-weight: 500;
        padding: 2px 6px;
        border-radius: 4px;
        white-space: nowrap;
      }
    }
  }
  
  .scenic-info {
    flex: 1;
    padding: 12px 16px 12px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .scenic-content {
      flex: 1;
      
      .scenic-name {
        font-size: 17px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
        line-height: 1.3;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
        overflow: hidden;
      }
      
      .scenic-desc {
        font-size: 13px;
        color: #999;
        margin-bottom: 6px;
        line-height: 1.4;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
        overflow: visible;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 36px;
      }
      
      .scenic-rating {
        margin-bottom: 8px;
        
        .stars {
          display: flex;
          align-items: center;
          gap: 1px;
        }
      }
    }
    
    .scenic-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .scenic-left-bottom {
        display: flex;
        flex-direction: column;
        gap: 2px;
        
        .scenic-price {
          display: flex;
          align-items: baseline;
          gap: 1px;
          
          .price-symbol {
            font-size: 14px;
            color: #ff6b35;
            font-weight: 500;
          }
          
          .price-value {
            font-size: 18px;
            color: #ff6b35;
            font-weight: 600;
            line-height: 1;
          }
          
          .price-unit {
            font-size: 12px;
            color: #ff6b35;
            font-weight: 500;
          }
        }
        
        .scenic-distance {
          font-size: 12px;
          color: #999;
          font-weight: 400;
        }
      }
      
      .scenic-right-bottom {
        display: flex;
        align-items: center;
        
        .booking-btn {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 6px 12px;
          background: transparent;
          color: #4A90E2;
          border: 1px solid #4A90E2;
          border-radius: 16px;
          font-size: 13px;
          font-weight: 500;
          
          .booking-text {
            color: #4A90E2;
            font-size: 13px;
            font-weight: 500;
          }
          
          &::after {
            content: ">";
            font-size: 12px;
            font-weight: bold;
            margin-left: 2px;
          }
        }
      }
    }
  }
}

/* 加载更多 */
.load-more, .no-more {
  text-align: center;
  padding: 20px;
  
  .load-text, .no-more-text {
    font-size: 14px;
    color: #999;
  }
}

/* 弹窗样式 */
.popup-content {
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  max-height: 70vh;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #f0f0f0;
    
    .popup-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    
    .popup-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

/* 排序选项 */
.sort-options {
  padding: 16px 0;
  
  .sort-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    
    &.active {
      background-color: #f0f8ff;
      
      .option-text {
        color: #4A90E2;
      }
    }
    
    .option-text {
      font-size: 15px;
      color: #333;
    }
  }
}

/* 筛选选项 */
.filter-options {
  padding: 16px 20px;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  
  .filter-group {
    margin-bottom: 24px;
    
    .group-title {
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
      display: block;
    }
  }
  
  .price-range {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    .price-item {
      padding: 8px 16px;
      border: 1px solid #e0e0e0;
      border-radius: 20px;
      background-color: #fff;
      
      &.active {
        border-color: #4A90E2;
        background-color: #f0f8ff;
        
        .price-text {
          color: #4A90E2;
        }
      }
      
      .price-text {
        font-size: 14px;
        color: #666;
      }
    }
  }
  
  .type-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    .type-tag {
      padding: 8px 16px;
      border: 1px solid #e0e0e0;
      border-radius: 20px;
      background-color: #fff;
      
      &.active {
        border-color: #4A90E2;
        background-color: #f0f8ff;
        
        .type-text {
          color: #4A90E2;
        }
      }
      
      .type-text {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

/* 筛选操作按钮 */
.filter-actions {
  display: flex;
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  gap: 12px;
  
  .reset-btn, .confirm-btn {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .reset-btn {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    
    .reset-text {
      font-size: 15px;
      color: #666;
    }
  }
  
  .confirm-btn {
    background-color: #4A90E2;
    
    .confirm-text {
      font-size: 15px;
      color: #fff;
      font-weight: 600;
    }
  }
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .scenic-item .scenic-info {
    padding: 12px;
  }
  
  .scenic-item .scenic-info .scenic-header .scenic-name {
    font-size: 15px;
  }
  
  .filter-section {
    padding: 10px 16px;
  }
}
</style>